<template>
<div class="form-con">
  <section class="product-border">
        <h2>价格/规格</h2>
       
        
          

          <ul class="specs-style"> 
            <li  v-for="(value,index) in specsList" :key="index">
              <span class="require">价格￥/库存：</span>
              <div class="price-flex"> 
              <label for="title">
                规格标题
                 <el-input
                  id="title"
                  v-model="value.name"
                  size="medium"
                  maxlength="10"
                  show-word-limit
                  class="small-input"
                />
              </label>
              <label for="ziying">
                自营价<el-input
                  id="ziying"
                  v-model="value.price_self"
                  size="medium"
                  class="small-input"
                />
              </label>
              <label for="kucun">
                库存<el-input
                  id="kucun"
                  v-model="value.stock"
                  size="medium"
                  class="small-input"
                />
              </label>
              <label for="daigou">
                代购价格<el-input
                  id="daigou"
                  v-model="value.price_agent"
                  size="medium"
                  class="small-input"
                />
              </label>
              <label for="suggestdaigou">
                参考采购价<el-input
                  id="suggestdaigou"
                  v-model="value.price_purchase"
                  size="medium"
                  class="small-input"
                />
              </label>
              <label for="zhengjia">
                正价<el-input
                  id="zhengjia"
                  v-model="value.price_regular"
                  size="medium"
                  class="small-input"
                />
              </label>
              <el-button type="danger" @click="deleteSpecs(value,index)" class="price-delete" :disabled="justOneNoDelete">删除</el-button>
              </div>
              
            </li>
            <div style="padding-left:15%">  
              <el-button class="add-rule disc-button" @click="addRule">
              添加一个规格
            </el-button>
            <el-button type="primary" @click="saveRule">
              保存
            </el-button>
            </div>
            
          </ul>
          
          
     
      </section>
</div>
</template>

<script>
import {postProductSpecsList,getProductSpecsList,putProductSpecsList,deleteProductSpecs } from '@/api/product'
export default {
  name: 'GraphicDetails',
  props:['product_id'],//创建 获取产品id
  data() {
    return {
      
      specsList:[{
          name: '', // 规格标题
          price_self: '', // 自营价
          stock: '', // 库存
          price_agent: '', // 代购价
          price_purchase: '', // 参考代购价
          price_regular: '' // 正价
        }],

     
    }
  },
  computed:{
    //价格规格只有一个就禁用删除，否则显示删除
    justOneNoDelete(){
      if(this.specsList.length>1){
        return false;
      }
      else{
        return true;
      }
    },
    //判断是否是编辑页面
    isEdit(){
      return this.$route.path.includes('edit')
    },
  },
  created(){
    if(this.isEdit){
      this.getProductSpecslist(this.$route.params.id)
    }
    console.log(this.product_id);
    
  },
  methods: {
    getProductSpecslist(id){
      getProductSpecsList(id).then(res=>{
         res.data.forEach(val=>{
                            val.price_self = val.price_self / 100;
                            val.price_agent = val.price_agent / 100;
                            val.price_purchase = val.price_purchase / 100;
                            val.price_regular = val.price_regular / 100;
                          })
         this.specsList = res.data
      console.log(this.specsList);
      })
     
      
    },
    // 提交表单
    saveRule() {
      if(!this.isEdit){
        let dataList =  JSON.parse(JSON.stringify(this.specsList))
           
                 dataList.forEach((val,index,arr)=>{
                           
                              arr[index].price_self = arr[index].price_self *100
                              arr[index].price_agent = arr[index].price_agent *100
                              arr[index].price_purchase = arr[index].price_purchase *100
                              arr[index].price_regular = arr[index].price_regular *100
                            
                            
                          })
        postProductSpecsList(this.product_id,dataList).then(res=>{
             if(res.code === 0){
               
               this.$emit('replaceFaq',"third");
               this.$emit('showSpecsNum',false)
               this.getProductSpecslist(this.product_id)
              this.$notify({
                  message: '添加规格成功',
                  type: 'success',
                  duration: 2000,
                })
            }

        })  
      }else{
              
             let dataList =  JSON.parse(JSON.stringify(this.specsList))
           
                 dataList.forEach((val,index,arr)=>{
                           
                              arr[index].price_self = arr[index].price_self *100
                              arr[index].price_agent = arr[index].price_agent *100
                              arr[index].price_purchase = arr[index].price_purchase *100
                              arr[index].price_regular = arr[index].price_regular *100
                            
                            
                          })
                         
                          
        putProductSpecsList(this.$route.params.id,dataList).then(res=>{
          if(res.code === 0){
            
            this.$emit('replaceFaq',"third");
           this.getProductSpecslist(this.$route.params.id)
            this.$notify({
                message: '修改规格成功',
                type: 'success',
                duration: 2000,
              })
          }
        })
      }
    },
     //添加规格
    addRule(){
      this.specsList.push({
          name: '', 
          price_self: '',
          stock: '', 
          price_agent: '', 
          price_purchase: '', 
          price_regular: '' 
        })
    },
   //删除价格/规格
    deleteSpecs(val,index){
     let localDelete = this.specsList.some(val=>{
                      return !val.id
                    })
      this.$confirm('是否删除该规格?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(!localDelete){
              deleteProductSpecs(val.id).then(res=>{
              if(res.code === 0){
                this.specsList.splice(index,1);
                
                this.$notify({
                  message: '删除规格成功',
                  type: 'success',
                  duration: 2000,
                })
              }
            })
          }else{
            this.specsList.splice(index,1);
          }
          
           
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
      
    })
     
    },
  }
}
</script>

<style lang="scss" scoped>
.form-con{
    padding: 1% 10% 5% 0;
  
 .product-border{
    border: 1px solid #eee;
    
    margin-bottom: 20px;
    h2{
      background-color: #eee;
      margin: 0;
      padding: 10px 0 10px 20px;
    }
    /* .form-main{
      padding: 2% 10%;
    } */
    .specs-style{
      padding: 2%;
      li{
        margin-bottom: 10px;
        span{
          display: inline-block;
          width: 15%;
          padding-left: 15px;
        }
     /*  border: 3px solid #eee;
      padding-bottom: 10px; */
        .price-flex{
          width: 80%;
          position: relative;
          display:inline-flex;
          flex-flow:row wrap;
          background-color: #eee;
          label{
          flex: 0 1 30%;
          margin:10px;
        }
        
        .price-delete{
          position: absolute;
          right: 10px;
          top: 40%;
        }

      }
      
      .small-input{
        width:50%;
        margin:10px;
      }
      }
  }
  }
}
</style>
